import { getMusic } from '@/services/ant-design-pro/api';
import { InboxOutlined } from '@ant-design/icons';
import { useIntl, useModel } from '@umijs/max';
import type { UploadProps } from 'antd';
import { App, List, message, Upload } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import './music.css';
const { Dragger } = Upload;

const Sql: React.FC = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  let [data, setData] = useState([]);
  const intl = useIntl();

  const li = useRef(null);
  const props: UploadProps = {
    name: 'file',
    multiple: true,
    headers: {
      Authorization: sessionStorage.getItem('userInfo') as string,
    },
    action: `${API_URL}/v1/uploads`,
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
        getMusic().then((res) => {
          setData(res.list);
        });
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  function handlePlay(e: any) {
    let path = `${DOMAIN}/music/`;
    path += e.target.innerText;
    setInitialState((pre) => {
      return {
        ...pre,
        playPath: path,
      };
    });
  }
  useEffect(() => {
    getMusic().then((res) => {
      setData(res.list);
    });
  }, []);
  return (
    <App>
      <div id="draw-out" style={{ height: 'calc(100vh - 216px)', background: 'white' }}>
        <header style={{ position: 'relative' }}>
          <Dragger {...props} className="my-dragger">
            <p className="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p className="ant-upload-text">
              {intl.formatMessage({
                id: 'component.dragUploadMusic',
                defaultMessage: 'Drag and drop files to upload music',
              })}
            </p>
          </Dragger>
        </header>
        <div className="list-contain">
          <List
            size="small"
            bordered
            dataSource={data}
            renderItem={(item) => {
              let classStr = `myli`;
              if (initialState?.playPath?.indexOf(item) !== -1) {
                classStr = `myli sel`;
              }
              return (
                <List.Item ref={li} onClick={handlePlay} className={classStr}>
                  {item}
                </List.Item>
              );
            }}
          />
        </div>
      </div>
    </App>
  );
};

export default Sql;
